<template>
  <!-- 内容主体区域 -->
  <div class="content">
    <!-- 左侧榜单区域 -->
    <div class="left-side">
      <div class="tab">
        <div
            class="tab-item"
            :class="{ active: activeTab === 'vip' }"
            @mouseenter="setTab('vip')"
        >vip金榜</div>
        <div
            class="tab-item"
            :class="{ active: activeTab === 'completed' }"
            @mouseenter="setTab('completed')"
        >完结金榜</div>
        <div
            class="tab-item"
            :class="{ active: activeTab === 'thousand' }"
            @mouseenter="setTab('thousand')"
        >千字金榜</div>
      </div>

      <ul class="rank-list">
        <li
            v-for="(item, index) in rankData[activeTab]"
            :key="item.id"
            class="rank-item"

        >
          <!-- 用索引 + 1 显示排名序号，从 1 开始 -->
          <span class="rank-tag">{{ index + 1 }}</span>
          <div class="rank-title">
            {{ item.title }}
          </div>
          <span class="author">{{ item.author }}</span>
        </li>
      </ul>

      <div class="rank-footer">
        <div class="rank-label">
          {{ footerLabel[activeTab] }}
        </div>
      </div>
    </div>

    <!-- 中间内容区域 -->
    <div class="middle-side">
      <div class="banner">
        <img src="@/assets/img/banner.png" alt="banner">
      </div>
      <!--        展示图片以及小说名-->
      <div class="imageList">
        <div class="story" v-for="(yq, index) in yqList" :key="index">
          <div class="storyInfo">
            <img :src="require('@/assets/img/'+yq.storyimg)"  alt="小说图片"></img>
          </div>
          <div @click="goDetail(yq)" class="storyName">《{{yq.name}}》</div>
        </div>
      </div>

      <div class="notice">
        <h3 class="notice-title">最新公告</h3>
        <ul class="notice-list">
          <li class="notice-item">霸王票抽奖和儿童站征文已开启，点击查收端午赠礼！</li>
          <li class="notice-item">五一快乐亿点点！动态装扮+超多好礼兑不停~ [04-29]</li>
          <li class="notice-item">小书喵五周年庆典有奖征集进行中，点击参与五一活动！</li>
        </ul>
      </div>
    </div>

    <!-- 右侧推荐区域 -->
    <div class="right-side">
      <div class="recommend-box">
        <h3 class="recommend-title">vip强力推荐</h3>
        <ul class="recommend-list">
          <li
              v-for="(item, index) in recommendList"
              :key="index"
              class="recommend-item"
          >
            <div class="recommend-text">
              {{ item.title }}
            </div>
            <span class="recommend-author">{{ item.author }}</span>
          </li>
          <div class="report-item">
            <img src="@/assets/img/jb.png">
            <span class="report-word">电话：110</span>
          </div>
        </ul>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from "vue";  // 合并导入语句
import { router } from "@/router/router.ts";
import request from "@/utils/request";
import {ElMessage} from "element-plus";
import {require} from "@/utils/getFileUrl"

//创建钩子获取数据
let yqList = ref()

//获取数据的页面
onMounted(()=> {
  request.get("/getWucp")
      .then(response => {
        yqList.value = response.data
      })
      .catch(error => {
        ElMessage.error(error)
      })
})

//使用小说对象作为参数并打开新窗口跳转详情页（导航栏上只显示小说id和名字）
function goDetail(story) {
  window.open(router.resolve({path: '/details',query:{"story":JSON.stringify(story)}}).href)
}


// 标签切换相关
const activeTab = ref('vip');
function setTab(tab: string) {
  activeTab.value = tab;
}

// 底部标签文本
const footerLabel = {
  vip: 'vip文月销量排行榜',
  completed: '完结文30日销量排行榜',
  thousand: '千字文月销量排行榜'
};

// 排行榜数据（带唯一ID）
const rankData = {
  vip: [
    { id: 1, title: "极品怎么就神套了[快穿]", author: "呱唧多容一" },
    { id: 2, title: "[三国]穿着龙袍穿越了！", author: "丛鲣" },
    { id: 3, title: "囤货，然后活下去", author: "阿拉贡夫人" },
    { id: 4, title: "普通人，但在a0爆圈中读千秋岁引发", author: "" }, // 截图里作者未显示，可根据实际补充
    { id: 5, title: "中间商赚差价，全民生", author: "lesliya" },
    { id: 6, title: "拥有富江体质后选出道了", author: "厌梨" },
    { id: 7, title: "女主并不觉得[快穿]", author: "初云秀儿" },
    { id: 8, title: "[综英美]我在哥谭当管家", author: "朝江烬" },
    { id: 9, title: "超级小子，但反转世界[综英美]", author: "颜荀" },
    { id: 10, title: "某柯学的义勇也没有被讨厌", author: "复西归" },
    { id: 11, title: "祖国，救救，拐拐", author: "三千大梦" },
    { id: 12, title: "漫画万人嫌自救指南", author: "奶茶巨屑僧" }
  ],
  completed: [
    { id: 13, title: "祝姑娘今天掉坑了没", author: "我想吃肉" },
    { id: 14, title: "太岁", author: "priest" },
    { id: 15, title: "我用人物面板伪装神棍", author: "李行歌" },
    { id: 16, title: "我比剧透先登基", author: "千里江风" },
    { id: 17, title: "卧底系统抽风后我改刷颜值值", author: "夜夕岚" },
    { id: 18, title: "小说家的边缘角色自救指南", author: "你少校短" },
    { id: 19, title: "cos优黑就不能打网球了吗", author: "暗色琉璃" },
    { id: 20, title: "海潮文武都能听到我的心声", author: "声色的木" },
    { id: 21, title: "全网黑被小祖宗在综艺带飞", author: "且拂" },
    { id: 22, title: "角色体验系统[娱乐圈]", author: "寻光小筑" },
    { id: 23, title: "让我寄生一下怎么了？", author: "别山去" },
    { id: 24, title: "哥谭市开放世界RPG", author: "雾里鬼" }
  ],
  thousand: [
    { id: 25, title: "爸爸是厨神[美食]", author: "朽木川" },
    { id: 26, title: "[综英美]黑暗多元，但马甲月下不归", author: "软不右川" },
    { id: 27, title: "如何用马甲合理发刀", author: "北狄有雾" },
    { id: 28, title: "六旬老头勇闯红黑游戏反", author: "松酪脆酱酱" },
    { id: 29, title: "明明只是在玩游戏结果真成", author: "一字江雪" },
    { id: 30, title: "他是S级污染物的白月光", author: "彦璃" },
    { id: 31, title: "我真的只是喜欢球而已", author: "吃油条的子" },
    { id: 32, title: "签到系统在诸朝直播[天幕]", author: "凡琳" },
    { id: 33, title: "在小排球里表演百分百空手接", author: "嗜睡伐" },
    { id: 34, title: "顶级圣父", author: "顾楚" },
    { id: 35, title: "我要吃饱", author: "别山去" },
    { id: 36, title: "普通的我被奉为神明", author: "风吹林安" }
  ]
};

// 右侧推荐列表数据，对应“vip强力推荐”“读者栽蒜苗”等内容
const recommendList = [
  { id: 37, title: "给立海大一点爆椒", author: "八角花椒" },
  { id: 38, title: "六旬老头勇闯红黑", author: "松酪脆酱酱" },
  { id: 39, title: "他是S级污染物的白月", author: "彦璃" },
  { id: 40, title: "o镜说了那里有路！", author: "俍晨星" },
  { id: 41, title: "为烫男人献上狗血剧本", author: "西灯" },
  { id: 42, title: "过气JUMP男主也", author: "银发天然卷" },
  { id: 43, title: "我送英雄落叶归根", author: "老纪" },
  { id: 44, title: "变成储户的我参加", author: "鸿君老阳" },
  { id: 45, title: "全大陆都在等我更新", author: "明昀" },
  { id: 46, title: "人生赢家[快穿]", author: "堪微" },
  { id: 47, title: "论如何拯救可怜小", author: "铮铮玉骨" },
  { id: 48, title: "无限：我在诡异世界", author: "澹涪寄" },
  { id: 49, title: "夭寿了爷爷穿进乙女游戏了", author: "" } // 截图里作者未显示，可补充
];


// 登录相关函数
function handleLogin() {
  console.log('触发登录操作');
}

// 注册相关函数
function handleRegister() {
  console.log('触发注册操作');
}

// 找回账号函数
function handleFindAccount() {
  console.log('触发找回账号操作');
}

// 找回密码函数
function handleFindPassword() {
  console.log('触发找回密码操作');
}

// 导航函数
function navigateTo(path: string) {
  console.log('导航到路径：', path);
}
function goTonovelList() {
  router.push({path: '/novelList'})
}
</script>

<style scoped>
@import '@/assets/css/yq.css';
</style>